<template>
  <div>
    <van-search v-model="seachBuildingName" placeholder="请输入搜索子单位" show-action @search="onSearch" @cancel="onCancel" />
    <van-collapse v-model="active" class="mobile-nav" v-for="(group, indexj) in gcList" :key="indexj">
      <van-collapse-item :title="group.label" :name="group.label" class="mobile-nav__item">
        <van-cell v-if="group.children" v-for="(navItem, index) in group.children" :key="index" :title="navItem.label" :to="{ path: 'shopInfo',name:'shopInfo', query: navItem.value}" is-link />
      </van-collapse-item>
    </van-collapse>
  </div>

</template>

<script>
import { getBuildings } from "./../../api/building";
export default {
  data() {
    return {
      seachBuildingName: "",
      active: [],
      gcList: []
    };
  },
  mounted() {
    this.getBuildings();
  },
  methods: {
    async getBuildings() {
      let res = await getBuildings();
      if (res.code === 0) {
        this.gcList = res.data;
      } else {
        this.$toast.fail(res.msg);
      }
    },
    onSearch() {
      this.active=[];
      const vm = this;
      this.gcList.forEach(function(value, index, array) {
        
        if (value.children) {
          value.children.forEach(function(cValue, cIndex) {
            if(cValue.label.indexOf(vm.seachBuildingName)>-1){
              vm.active.push(value.label);
              return
            }
          });
        }
      });
    },
    onCancel() {}
  }
};
</script>

<style lang="scss">
.mobile-nav {
  &__item {
    margin-bottom: 20px;
  }
  &::after {
    display: none;
  }
  .van-collapse-item__content {
    padding: 0;
  }
  .van-collapse-item__title {
    font-size: 16px;
    line-height: 36px;
    align-items: center;
  }
}
</style>